<template>
  <div class="app-container">
    <el-row :gutter="10">
        <el-col :span="13">
            <el-card class="box-card">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                    <el-form-item label="登录账号" prop="name">
                        <el-input
                          style="width: 180px;"
                          v-model="queryParams.name"
                          placeholder="筛查人员登录账号"
                          clearable
                          @keyup.enter.native="handleQuery"
                          />
                        <el-button type="primary" 
                          style="margin-left: 10px;"
                          icon="el-icon-search" 
                          size="mini" 
                          @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table 
                  v-loading="loading" 
                  :data="tableData" 
                  highlight-current-row
                  @current-change="handlePersonChange">
                    <el-table-column type="index" width="55" align="center" />
                    <el-table-column label="登录账号" align="center" prop="userName"/>
                    <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true"/>
                    <el-table-column label="性别" align="center" prop="sex" width="80">
                      <template slot-scope="scope">
                        <dict-tag 
                          :options="dict.type.sys_user_sex" 
                          :value="scope.row.sex"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="手机号" align="center" prop="phonenumber" ></el-table-column>
                    <el-table-column label="状态" align="center" key="status">
                      <template slot-scope="scope">
                        <dict-tag 
                          :options="dict.type.sys_normal_disable" 
                          :value="scope.row.sex"/>
                      </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="11">
            <schoolTable ref="schoolTable" />
        </el-col>
    </el-row>
  </div>
</template>

<script>
import schoolTable from './components/school-table.vue'
import { listUser } from "@/api/system/user"
export default {
  name: "ScreenerList",
  dicts: ['sys_normal_disable','sys_user_sex'],
  data() {
    return {
      // 遮罩层
      loading: true,
      tableData: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        userType: '10', //00 系统管理员、10 筛查人员
        name: undefined
      }
    };
  },
  created() {
    this.getList();
  },
  components: {
    schoolTable
  },
  methods: {
    /** 查询筛查人员列表 */
    getList() {
      listUser(this.queryParams).then(res => {
        this.tableData = res.rows
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**人员切换 */
    handlePersonChange(user) {
      let id = user ? user.userId: -1
      this.$refs.schoolTable.handleGetBindSchool(id)
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .box-card{
        min-height: calc(100vh - 120px);
    }
    .class-container{
      display: flex;
      
    }
</style>
